<template>
	<view class="brand-list empire-mall__grid">
		<EmpireCard v-for="(item, key) in brandList" :key="key">
			<EmpireImageVertical width="250rpx" height="250rpx" :src="item.src" :title="item.title" :price="item.price">
				<template #description class="empire-mall__flex-between">
					<text>{{ item.total }}人加购</text>
					<uni-icons type="plus-filled" color="#1BA4F0" size="24" @click="handlePlus"></uni-icons>
				</template>
			</EmpireImageVertical>
		</EmpireCard>
	</view>
</template>

<script setup>
import EmpireCard from '@/components/empire-card';
import EmpireImageVertical from '@/components/empire-image/empire-image-vertical.vue';
import { ref, onMounted } from 'vue';

const brandList = ref([]);
onMounted(() => {
	brandList.value = [
		{
			title: '肌肉科技氨基酸',
			src: '/static/home/7.png',
			price: '199',
			total: 1231
		},
		{
			title: '银白科技蓝牙互联智能体脂称SHY-005',
			src: '/static/home/8.png',
			price: '199',
			total: 1231
		},
		{
			title: '肌肉科技氨基酸',
			src: '/static/home/9.png',
			price: '199',
			total: 1231
		},
		{
			title: '银白科技蓝牙互联智能体脂称SHY-005',
			src: '/static/home/10.png',
			price: '199',
			total: 1231
		},
		{
			title: '肌肉科技氨基酸',
			src: '/static/home/11.png',
			price: '199',
			total: 1231
		},
		{
			title: '银白科技蓝牙互联智能体脂称SHY-005',
			src: '/static/home/12.png',
			price: '199',
			total: 1231
		}
	];
});

function handlePlus() {}
</script>

<style lang="scss" scoped></style>
